<template>
  <view>
    pageComponent
  </view>
  <view :style="style">
    <view>
      循环外
    </view>
    <!-- <view>
      modules[0]:{{modules[0]}}
    </view> -->
    <item :module="modules[0]"></item>

    <block v-for="(item,index) in modules" :key="item.moduleId">
      <view>
        循环内
      </view>
      <!-- <view>
        item:{{item}}
      </view> -->
      <item :module="item"></item>
    </block>
  </view>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from "vue";
  import item from "/components/dynamicPage/item/item.vue"

  onMounted(() => {
    console.log("进入/item/item");
  })

  //整体样式
  const style = ref("")
  // 组件
  const modules = ref([])

  //接收参数
  const props = defineProps({
    itjid: {
      type: Number, // 类型校验
      required: true, // 必传校验
    }
  })
  console.log("props:", props.itjid);
  //获取原始组件json文件
  uni.request({
    url: "https://www.ruanzi.net/jy/go/we.aspx?ituid=50&itjid=" + props.itjid,
    // url: "/api/jy/go/we.aspx?ituid=50&itjid=" + props.itjid,
    method: "GET",
    success(res) {
      console.log(res.data);
      wx.setNavigationBarTitle({
        title: res.data.pageName,
      })
      style.value = res.data.style

      const oldModules = res.data.modules
      apiAction(oldModules)
    }
  })

  //组件api获取数据
  const apiAction = (oldModules) => {
    // 递归处理每个模块及其子模块
    const processModule = (module) => {
      return new Promise((resolve) => {
        if (module.api.url != '') {
          // const url = module.api.url.replace('https://www.ruanzi.net', '/api')
          uni.request({
            url: module.api.url,
            // url: url,
            success(res) {
              // 使用深拷贝避免引用问题
              if (res.data.data) {
                module.data = JSON.parse(JSON.stringify(res.data.data));
              }
              if (res.data.children) {
                module.children = JSON.parse(JSON.stringify(res.data.children));
              }
              resolve()
            },
            fail() {
              resolve() // 失败也 resolve 以保证流程继续
            }
          })
        } else {
          resolve()
        }
      }).then(() => {
        // 递归处理子模块，并收集所有子 Promise
        if (module.children.length != 0) {
          const childRequest = module.children.map(item => processModule(item))
          return Promise.all(childRequest)
        }
      })
    }

    const promises = oldModules.map(module => processModule(module))

    // 等待所有请求完成
    Promise.all(promises).then(() => {
      // 更新数据到视图层
      modules.value = oldModules
      console.log("最终数据:", modules.value);
    })
  }
</script>

<style>

</style>